<template>
  <div class="rating-select">
		<div class="rating-type">
			<span @click="_select(2)" class="block positive" :class="{'active': selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
			<span @click="_select(0)" class="block positive" :class="{'active': selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
			<span @click="_select(1)" class="block negative" :class="{'active': selectType===1}">{{desc.negative}}<span class="count">{{nagetives.length}}</span></span>
		</div>
		<div class="switch" :class="{'on': onlyContent}" @click="_switchIcon">
			<i class="icon-check_circle"></i>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>
<script type="text/ecmascript">
const POSITIVE = 0;
const NAGETIVE = 1;
const ALL = 2;

export default {
	props: {
		ratings: {
			type: Array,
			default () {
				return [];
			}
		},
		selectType: {
			type: Number,
			default: ALL
		},
		onlyContent: {
			type: Boolean,
			default: false
		},
		desc: {
			type: Object,
			default () {
				return {
					all: '全部',
					positive: '满意',
					negative: '不满意',
				}
			}
		}
	},
	data () {
		return {
			childSelectType: this.selectType, // 创建props属性selectType的副本--childSelectType
			childOnlyContent: this.onlyContent
		}
	},
	watch: {
		selectType (type) { // 监听外部对props属性selectType的变更，并同步到组件内的data属性childSelectType中
			this.childSelectType = type;
		},
		childSelectType (type) { // 组件内对childSelectType变更后向外部发送事件通知
			this.$emit('on-select-type', type);
			
		},
		onlyContent (bool) {
			this.childOnlyContent = bool;
		},
		childOnlyContent () {
			this.$emit('on-only-content', this.childOnlyContent);
		}
	},
	computed: {
		positives () {
			return this.ratings.filter((rating) => {
				return rating.rateType === POSITIVE;
			});
		},
		nagetives () {
			return this.ratings.filter((rating) => {
				return rating.rateType === NAGETIVE;
			});
		}
	},
	methods: {
		_select (type) {
			this.childSelectType = type;
		},
		_switchIcon () {
			this.childOnlyContent = !this.onlyContent;
		}
	}
};
</script>

<style lang="less" scoped>
@import '../../common/less/mixin.less';
@import '../../common/less/base.less';
.rating-select {
	
	.rating-type {
		padding: 18px 0;
		margin: 0 18px;
		font-size: 0;
		.border-1px(rgba(7,17,27,.1));
		.block {
			display: inline-block;
			padding: 8px 12px;
			margin-right: 8px;
			line-height: 16px;
			border-radius: 1px;
			font-size: 12px;
			color: rgb(77,85,93);
			&.active {
				color: #fff;
			}
			.count {
				font-size: 8px;
				margin-left: 2px;
				
			}
			&.positive {
				background: rgba(0,160,220,.2);
				&.active {
					background: rgba(0,160,220,1);
				}
			}
			&.negative {
				background: rgba(77,85,93,.2);
				&.active {
					background: rgba(77,85,93,1);
				}
			}
		}
	}
	.switch {
		padding: 12px 18px;
		line-height: 24px;
		border-bottom: 1px solid rgba(7,17,27,.1);
		color: rgb(147,153,159);
		font-size: 0;
		&.on {
			.icon-check_circle {
				color: #00c850;
			}
		}
		.icon-check_circle {
			display: inline-block;
			vertical-align: top;
			margin-right: 4px;
			font-size: 24px;
		}
		.text {
			display: inline-block;
			vertical-align: top;
			font-size: 12px;
		}
	}
}
</style>
